<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      :title="modalTitle"
      width="800px"
      @ok="handleOk"
      @cancel="handleCancel"
      destroyOnClose
      @visible-change="visibleChange"
    >
      <BasicTable
        :columns="columns"
        v-bind="tableConfig"
        :api="getCarrierList"
        :searchInfo="searchInfo"
        @row-select="handleRowSelect"
      ></BasicTable>
    </BasicModal>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal'; // 假设的组件导入路径
import { getCarrierList } from '/@/api/common/api';
import {createAsyncComponent} from "@/utils/factory/createAsyncComponent"; // 假设的API导入路径

export default defineComponent({
  name: 'CarrierSelectModal',
  components: {
    BasicModal,
    BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), {
      loading: true,
    }),
  },
  props: {
    modalTitle: {
      type: String,
      default: '承运商选择',
    },
    // 其他可能需要的props...
  },
  setup(props, { emit }) {
    const columns = [
      {
        prop: 'carrier_name',
        label: '承运商名称',
      },
      {
        prop: 'phone_number',
        label: '电话号码',
      },
      // 其他可能需要的操作列...
    ];

    const tableConfig = {
      // 表格的其他配置...
    };

    const searchInfo = ref({}); // 搜索信息，可以根据需要添加字段

    const fetchCarrierList = async (params) => {
      // 调用API获取承运商列表
      // ...
    };

    const handleOk = () => {
      // 处理确定按钮的点击事件
      // 如果有选中的行，可以通过 emit 发送出去
    };

    const handleCancel = () => {
      // 处理取消按钮的点击事件
      // ...
    };

    const handleRowSelect = (row) => {
      // 处理行的选择事件
      // 可以通过 emit 发送出去
      emit('getSelectResult', row);
    };

    const visibleChange = (visible) => {
      // 处理模态框显示/隐藏状态的变化
      // ...
    };

    return {
      columns,
      tableConfig,
      searchInfo,
      getCarrierList,
      handleOk,
      handleCancel,
      handleRowSelect,
      visibleChange,
    };
  },
});
</script>
